<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <form @submit.prevent="submit">
            <label>账号:</label>
            <input type="text" v-model="userData.userName"></br>
            <label>密码:</label>
            <input type="password" v-model="userData.password"></br>
            <label>性别:</label>
            男<input type="radio" value="1" v-model="userData.sex">
            女<input type="radio" value="0" v-model="userData.sex"></br>
            <label>爱好:</label>
            抽烟<input type="checkbox" value="抽烟" v-model="userData.hobby">
            喝酒<input type="checkbox" value="喝酒" v-model="userData.hobby">
            烫头<input type="checkbox" value="烫头" v-model="userData.hobby">
            </br>
            <label>所属校区:</label>
            <select v-model="userData.address">
                <option value="beijing">北京</option>
                <option value="shenzhen">深圳</option>
                <option value="shanghai">上海</option>
            </select></br>
            <label>其他信息:</label>
            <textarea v-model="userData.info" rows="5"></textarea></br>
            <button type="submit">提交</button>
        </form>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            data: {
                userData: {
                    userName: "",
                    password: "",
                    sex: 1,
                    hobby: [],
                    address: "",
                    info: ""
                },
            },
            methods: {
                submit() {
                    console.log(this.userData);
                }
            }
        });
        vm.$mount("#app");

    </script>

</body>

</html>